<template>
  <div class="risk-img flex-acenter">
    <el-image class="img" :src="levelImg" lazy></el-image>
  </div>
</template>

<script>
export default {
  props: {
    /**风险等级 */
    level: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
    }
  },
  computed: {
    levelImg () {
      const imgPath = require(`@/assets/images/dashboard/lev_${this.level}.png`)
      return imgPath
    },
  },
}
</script>

<style lang='less' scoped>
.risk-img {
  // margin: 0 auto;
  width: 100%;
  height: 100%;
  background: url("@/assets/images/dashboard/risk_bg.png");
  background-size: contain;
  .img {
    margin: 0 auto;
    transition: all 0.5s ease;
  }
}
</style>